<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas Demo</title>
    <style>
        canvas {
      cursor: pointer;
      border: 1px solid black;
    }
  </style>
</head>

<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script type="text/javascript">
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

let scale = 1;
let offsetX = 0;
let offsetY = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.save();
  ctx.translate(offsetX, offsetY);
  ctx.scale(scale, scale);
  
  // 绘制内容
  ctx.fillStyle = "blue";
  ctx.fillRect(50, 50, 100, 100);
  
  ctx.restore();
  
  requestAnimationFrame(draw);
}

canvas.addEventListener("wheel", (event) => {
  const delta = Math.sign(event.deltaY);
  const scaleFactor = 1.1;
  
  if (delta > 0) {
    scale /= scaleFactor;
  } else {
    scale *= scaleFactor;
  }
  
  scale = Math.max(0.1, Math.min(10, scale));
  
  event.preventDefault();
});

canvas.addEventListener("mousedown", (event) => {
  const startX = event.clientX - canvas.getBoundingClientRect().left;
  const startY = event.clientY - canvas.getBoundingClientRect().top;
  
  canvas.addEventListener("mousemove", move);
  
  function move(event) {
    const newX = event.clientX - canvas.getBoundingClientRect().left;
    const newY = event.clientY - canvas.getBoundingClientRect().top;
    
    offsetX += newX - startX;
    offsetY += newY - startY;
    
    startX = newX;
    startY = newY;
  }
  
  canvas.addEventListener("mouseup", () => {
    canvas.removeEventListener("mousemove", move);
  });
});

draw();
</script>

</html>